<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 注意:返回值有且只能是一个根元素.
        // function Boy(){
        // 正确写法:
        // return (
        //     <div>
        //         <h3>男生小说</h3>
        //     </div>
        // )

        // 不正确：
        // return (
        //     <div>
        //         <h3>男生小说</h3>
        //     </div>
        //     <div>
        //         <h3>男生小说</h3>
        //     </div>
        // )

        // 以下可以解决问题，但是外层多了一个标签div
        // return (
        //     <div>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //     </div>
        // )

        // 可以使用空标签
        // return (
        //     <>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //     </>
        // )

        // return (
        //     <React.Fragment>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //     </React.Fragment>
        // )

        // const {Fragment} = React;
        // return (
        //     <Fragment>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //         <div>
        //             <h3>男生小说</h3>
        //         </div>
        //     </Fragment>
        // )
        // }
        // root.render(<Boy/>);
        // root.render(<Boy></Boy>)
    }
    {
        // 1
        // function Boy(){
        //     return (
        //         <div>
        //             <h3>男生小说1</h3>
        //         </div>
        //     )
        // }
        // root.render(<Boy/>);


        // 2
        // const Boy =function(){
        //     return (
        //         <div>
        //             <h3>男生小说2</h3>
        //         </div>
        //     )
        // }
        // root.render(<Boy/>);


        // 3 箭头函数:如果在返回值之前有逻辑的话加上{},否则直播写()
        // const Boy = () => (
        //     <div>
        //         <h3>男生小说3</h3>
        //     </div>
        // )
        // root.render(<Boy/>);

        // 4
        const obj = {
            Boy(){
                return (
                    <div>
                        <h3>男生小说4</h3>
                    </div>
                )
            },
            Girl(){
                return (
                    <div>
                        <h3>女生小说4</h3>
                    </div>
                )
            }
        }
        const {Boy,Girl} = obj;
        root.render((
            <>
                <obj.Boy/>
                <hr/>
                <obj.Girl/>
                <hr/>
                <Boy/>
                <hr/>
                <Girl/>
                <hr/>
            </>
        ));
    }

</script>
</html>